[Javascript] show/hide layers on mouseover

Wed Apr 21 03:51:16 CDT 2004

Hi Alan.

I've hacked about with your hacked together code, and if I understand what
you want correctly, it should do the trick.  I've only tested this in IE6,
but I'm not aware of any IE specific techniques I've used.

Let me know if it's no good...

Matt

---------------
<html><head>
<script>
function toggle(theDiv) {
    var elem = document.getElementById(theDiv);
    elem.style.display = (elem.style.display == "none")?"":"none";
}
//-->
</script>
</head>
<body>

 <div id="test" onMouseOver="toggle('testLayer1');return false;"
onMouseOut="toggle('testLayer1');return false;">
  <a href="#">Open and Close</a>
  <div id="testLayer1" style="display: none;">A description</div>
 </div>

 <div id="Div1" onMouseOver="toggle('testLayer2');return false;"
onMouseOut="toggle('testLayer2');return false;">
  <a href="#">Open and Close</a>
  <div id="testLayer2" style="display: none;">A description</div>
 </div>

 <div id="Div2" onMouseOver="toggle('testLayer3');return false;"
onMouseOut="toggle('testLayer3');return false;">
  <a href="#">Open and Close</a>
  <div id="testLayer3" style="display: none;">A description</div>
 </div>

</body>
</html>
-------------
----- Original Message ----- 
From: "Alan Easton" <alaneaston666 at hotmail.com>
To: <javascript at LaTech.edu>
Sent: Wednesday, April 21, 2004 9:38 AM
Subject: [Javascript] show/hide layers on mouseover

> Hello People,
>
> I am looking for a menu structure. If I simply had 4 links, one under the
> other, I would like to mouseover the 1st link, and all its sub-links to
> appear underneath it, simply shifting the remaining 3 links down. Then I
> could simply move to the sublinks and click on them, or move off the link
> and sub-links and they would all dissappear, and the other 3 links would
> move back up in order.......I hope I have explained that well enough. I
have
> hacked a piece of code that does what I want by clicking the link, and
then
> clicking the link again to make the sub-links dissappear, but I want it to
> occur on mouseover........any ideas
>
> Code:
> --------------------------------------------------------------
>
> <html><head>
> <script>
> function toggle(theDiv) {
>     var elem = document.getElementById(theDiv);
>     elem.style.display = (elem.style.display == "none")?"":"none";
> }
> //-->
> </script>
> </head>
> <body>
> <div id="test">
> <a href="#" onclick="toggle('testLayer1');return false;">Open and
Close</a>
> </div>
> <div id="testLayer1" style="display: none;">A description</div>
>
> <div id="Div1">
> <a href="#" onclick="toggle('testLayer2');return false;">Open and
Close</a>
> </div>
> <div id="testLayer2" style="display: none;">A description</div>
>
> <div id="Div2">
> <a href="#" onclick="toggle('testLayer3');return false;">Open and
Close</a>
> </div>
> <div id="testLayer3" style="display: none;">A description</div>
> </body>
> </html>
>
> --------------------------------------------------------------
>
> Browser compatibility is for it to hopefully work in version 4 browsers
and
> above, but IE5 and NN6 and above would do.
>
> Any help with this would be greatly appreciated.
>
> Thanks for your time,
>
> Alan...
>
> _________________________________________________________________
> It's fast, it's easy and it's free. Get MSN Messenger today!
> http://www.msn.co.uk/messenger
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
> --
> This email has been verified as Virus free
> Virus Protection and more available at http://www.plus.net